<!DOCTYPE HTML>
<html>
<head>
<title>Services</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Solutem Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script src="js/jquery-1.11.1.min.js"></script>
<!---- start-smoth-scrolling---->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
 <script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event){		
				event.preventDefault();
				$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
			});
		});
	</script>
<!---End-smoth-scrolling---->
<link href="css/component.css" rel="stylesheet" type="text/css"  />
<script src="js/modernizr.custom.js"></script>
</head>
<body class="cbp-spmenu-push">
	<!--header-banner-->
	<div class="header-banner">
		<div class="banner-grids">
			<div class="baneer-grid1">
			</div>
			<div class="baneer-grid2">
			</div>
			<div class="baneer-grid3">	
			</div>
			<div class="baneer-grid4">
			</div>
			<div class="baneer-grid5">
			</div>
			<div class="baneer-grid6">
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="top-header">
			<div class="container">
				<div class="logo">
					<a href="index.html">Solutem</a>
				</div>
				<div class="top-nav">
						<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
							<h3>Menu</h3>
							<a href="index.html">home</a>
							<a href="about.html">about</a>
							<a href="services.html" class="active">services</a>
							<a href="gallery.html">gallery</a>
							<a href="typo.html">typo</a>
							<a href="contact.html">contact</a>
						</nav>
						<div class="main buttonset">	
								<!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
								<button id="showRightPush"><img src="images/menu-icon.png" alt=""/></button>
								<!--<span class="menu"></span>-->
						</div>
						<!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
						<script src="js/classie.js"></script>
						<script>
							var menuRight = document.getElementById( 'cbp-spmenu-s2' ),
							showRightPush = document.getElementById( 'showRightPush' ),
							body = document.body;

							showRightPush.onclick = function() {
								classie.toggle( this, 'active' );
								classie.toggle( body, 'cbp-spmenu-push-toleft' );
								classie.toggle( menuRight, 'cbp-spmenu-open' );
								disableOther( 'showRightPush' );
							};

							function disableOther( button ) {
								if( button !== 'showRightPush' ) {
									classie.toggle( showRightPush, 'disabled' );
								}
							}
						</script>
						<!-- /script-for-menu -->
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!--end-header-->
		<div class="content">
			<!--who we do-->
			<div class="charities">
					<div class="container">
					<h3>our charities</h3>
						<div class="charitie-grids">
							<div class="col-md-3 charitie-grid">
							<span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
								<h4>Adoption Child</h4>
								<p>Raemuis ultricaretra gc accumsan malda or sit amet errepsm do elentu vel curslor sitmt conaiing eli.</p>
							</div>
							<div class="col-md-3 charitie-grid">
							<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
								<h4>Charity actions</h4>
								<p>Raemuis ultricaretra gc accumsan malda or sit amet errepsm do elentu vel curslor sitmt conaiing eli.</p>
							</div>
							<div class="col-md-3 charitie-grid">
							<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
								<h4>Child Protection</h4>
								<p>Raemuis ultricaretra gc accumsan malda or sit amet errepsm do elentu vel curslor sitmt conaiing eli.</p>
							</div>
							<div class="col-md-3 charitie-grid">
								<span class="glyphicon glyphicon-user" aria-hidden="true"></span>						
								<h4>Pellentesque sed dolor</h4>
								<p>Raemuis ultricaretra gc accumsan malda or sit amet errepsm do elentu vel curslor sitmt conaiing eli.</p>
							</div>
							<div class="clearfix"></div>
						</div>
				</div>
				</div>
					<div class="services-section">
						<div class="container">
						<h3>services</h3>
						<div class="services-grids">
						<div class="col-md-4 services-grid">
						 <img src="images/p5.jpg" class="img-responsive" alt="" />
						<h4>Pellentesque</h4>
					<p>Were dolor in hendrerit in vulputate velit esse molestie con sequat,Nulla consectetur maximus sem vel aliquet. Donec blandit condimentum varius</p>
						<a href="#" class="button"> more info</a>
						</div>
						<div class="col-md-4 services-grid">
						<img src="images/p6.jpg" class="img-responsive" alt="" />
						<h4>Malesuada fames</h4>
					<p>Were dolor in hendrerit in vulputate velit esse molestie con sequat,Nulla consectetur maximus sem vel aliquet. Donec blandit condimentum varius</p>
						<a href="#" class="button"> more info</a>
						</div>
						<div class="col-md-4 services-grid">
						<img src="images/p7.jpg" class="img-responsive" alt="" />
						<h4>faucibus risus</h4>
					<p>Were dolor in hendrerit in vulputate velit esse molestie con sequat,Nulla consectetur maximus sem vel aliquet. Donec blandit condimentum varius</p>
						<a href="#" class="button"> more info</a>
						</div>
						<div class="clearfix"></div>
						</div>

					</div>
				</div>
				</div>
				<div class="service-list">
					<div class="container">
						<h3>service-list</h3>
						<div class="service-grids">
						<div class="col-md-4 ser-list">
							<ul>
							<li><a href="#">Fusce interdum metus et turpis ornare sed</a></li>
							<li><a href="#">Morbi volutpat enim placerat </a></li>
							<li><a href="#">Praesent porttitor congue elit, non tempus</a></li>
							<li><a href="#">Lorem ipsum dolor sed leoraesent</a></li>
							</ul>
						</div>
						<div class="col-md-4 ser-list">
							<ul>
							<li><a href="#">Pestibulum molestieenean nonummy</a></li>
							<li><a href="#">Hendreritivamus eget nibh vel metus</a></li>
							<li><a href="#">Aenean nec eros luctus stibulum ante</a></li>
							<li><a href="#">Osollic velitauguet pharetra augue nec</a></li>
							</ul>
						</div>
						<div class="col-md-4 ser-list">
							<ul>
							<li><a href="#">Lorem ipsum dolor sit</a></li>
							<li><a href="#">Vestibulum ante faucibus orci ltrices</a></li>
							<li><a href="#">Dapibus pulvinonec eget tellus non era</a></li>
							<li><a href="#">Tincidunt ac, viverraonec porta diam eu</a></li>
							</ul>
						</div>
						<div class="clearfix"></div>
						</div>
						</div>
						</div>
				

			<div class="footer-section">
						<div class="container">
							<div class="footer-top">
						<p>Copyright &copy; 2015.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
									</div>
							<script type="text/javascript">
						$(document).ready(function() {
							/*
							var defaults = {
					  			containerID: 'toTop', // fading element id
								containerHoverID: 'toTopHover', // fading element hover id
								scrollSpeed: 1200,
								easingType: 'linear' 
					 		};
							*/
							
							$().UItoTop({ easingType: 'easeOutQuart' });
							
						});
					</script>
				<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
				</div>
			</div>


				

</body>
</html> 